<template>
  <div class="vpt-monitoring-panel">
    <div class="title">
      {{
        monitoringData && monitoringData[0]?.type == "01"
          ? "ECS 弹性云服务器"
          : monitoringData && monitoringData[0]?.type == "02"
          ? "DCS 分布式缓存服务"
          : monitoringData && monitoringData[0]?.type == "03"
          ? "ELB 弹性负载均衡"
          : "GaussDB 数据库服务"
      }}
    </div>
    <div class="content">
      <chartPanel
        :chartType="chartType"
        v-for="(item, index) in monitoringData"
        :key="index"
        :itemData="item"
      ></chartPanel>
    </div>
  </div>
</template>
    
<script setup>
import chartPanel from "@/components/vpt-chart-panel/index.vue";

const props = defineProps({
  chartType: { type: String, default: "init" },
  monitoringData: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="less" scoped>
.vpt-monitoring-panel {
  display: flex;
  flex-direction: column;
  .title {
    text-align: left;
    font-size: 0.18rem;
    color: #ffffff;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>